// header
header{
  .sliderBox{
    width: 100%;
    background-color: #f2f2f2;
    .el-carousel{
      width: 1000px;
      margin: auto;
      img{
        height: 100%;
        width: 100%;
      }
    }
  }
}
// main
main{
  // 推荐
  .recommend{
    .container{
      display: flex;
      justify-content: space-between;
      padding: 30px 0;
      .newTestRec,.seniorClass{
        width: 48%;
        height: 100px;
        background-color: #f9fafa;
        cursor: pointer;
        a{
          display: block;
          width: 100%;
          height: 100%;
          color: #000;
          h4{
            margin: 20px 0 10px;
            font-size: 1.3rem;
            text-align: center;
          }
          p{
            margin: 0;
            text-align: center;
          }
        }
      }
      .newTestRec:hover,
      .seniorClass:hover{
        background-color: #f2f2f2;
      }
    }
  }
  // 生涯课堂
  .careerClass,  // 生涯课堂
  .careerInfo{   // 生涯资讯
    padding-top: 30px;
    .title{
      border-bottom: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      .titleName{
        font-size: 1.2rem;
        font-weight: bold;
        padding-left: 20px;
      }
      .titleList{
        ul{
          display: flex;
          li{
            font-size: 0.9rem;
            padding: 0 6px;
            color: #666;
          }
          li:hover{
            color: #008ace;
            cursor: pointer;
          }
          li.onMouse{
            color: #008ace;
          }
        }
      }
    }
    .content{
      border: 1px solid #f7f7f7;
      p{
        padding: 120px 0;
        margin: 0;
        text-align: center;
      }
    }
  }
  // 生涯工具
  .careerTool{
    background-color: #f7f7f7;
    padding-top: 30px;
    .title{
      border-bottom: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      .titleName{
        font-size: 1.2rem;
        font-weight: bold;
        padding-left: 20px;
      }
    }
    .content{
      .toolList{
        padding-bottom: 30px;
        ul{
          display: flex;
          justify-content: space-between;
          li{
            width: 22%;
            max-width: 260px;
            background-color: #fff;
            a{
              display: block;
              width: 100%;
              height: 100%;
            }
            .toolBox{
              border-radius: 4px;
              padding: 40px 0 10px;
              min-height: 300px;
              background-repeat: no-repeat;
              background-position: bottom center;
              h4{
                font-weight: normal;
                font-size: 1.4rem;
                color: #2e86ff;
                text-align: center;
                margin: 0;
              }
              p{
                padding: 30px 40px;
                color: #555;
              }
            }
            .toolBox:hover{
              box-shadow: 0 0 8px #2f8efa;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  // 快捷入口
  .quickEntry{
    background-color: #f7f7f7;
    .entryList{
      padding: 30px 0;
      display: flex;
      justify-content: space-around;
      .entryBox{
        width: 15%;
        text-align: center;
        a{
          display: block;
          width: 100%;
          height: 100%;
        }
        i{
          display: inline-block;
          width: 62.5px;
          height: 62.5px;
          border-radius: 31.25px;
          background-image: url(../../assets/img/careerplan_enter.png);
          background-repeat: no-repeat;
          background-position: left top;
        }
        i.checkRank{
          background-position: left top -62px;
        }
        i.careerEstimate{
          background-position: left top -124px;
        }
        i.universityInfoBase{
          background-position: left top -185px;
        }
        i.majorInfoBase{
           background-position: left top -247.5px;
        }
        i.careerInfoBase{
          background-position: left top -310px;
        }
        p{
          margin: 20px 0;
        }
      }
      .entryBox:hover{
        i.newVolunteer{
          background-position: right top 0;
        }
        i.checkRank{
          background-position: right top -62px;
        }
        i.careerEstimate{
          background-position: right top -124px;
        }
        i.universityInfoBase{
          background-position: right top -185px;
        }
        i.majorInfoBase{
          background-position: right top -247.5px;
        }
        i.careerInfoBase{
          background-position: right top -310px;
        }
        p{
          color: #2e86ff;
        }
      }
    }
  }
}